<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div v-loading="loading">
        <el-tabs :stretch="true">
            <el-tab-pane label="基础">
                <!-- <el-form-item label="显示个数">
                    <el-input-number v-model="module.data.limit" :min="1" :max="10" />
                </el-form-item> -->
                <el-form-item label="左侧颜色">
                    <el-color-picker v-model="module.data.leftColor"
                        :predefine="predefineColors"></el-color-picker>
                </el-form-item>
                <el-form-item label="右侧颜色">
                    <el-color-picker v-model="module.data.rightColor"
                        :predefine="predefineColors"></el-color-picker>
                </el-form-item>
                <el-form-item label="提示文字">
                    <el-input v-model="module.data.tipText" type="textarea" :rows="4" />
                </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="标题">
                <header-editor :module="module.header"/>
            </el-tab-pane>
            <el-tab-pane label="样式">
                <module-style-editor :module="module" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import Vue from 'vue'
import ModuleStyleEditor from "../ModuleStyleEditor/Index";
import HeaderEditor from "../base/HeaderEditor";
// import { getToursList } from "@/api/weapp";

export default {
    components: {
        HeaderEditor,
        ModuleStyleEditor,
    },
    props: {
        module: { type: Object },
    },
    data() {
        return {
            // items: [],
            loading: false,
            activeTab: "base",
            predefineColors: [
                    '#ff4500',
                    '#ff8c00',
                    '#ffd700',
                    '#90ee90',
                ]
        };
    },
    mounted: function () {

    },

    methods: {

    },
};
</script>

<style scoped>
.styles {
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-content: center;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}

.styles li {
    width: 100px;
    height: 80px;
    border: 1px solid #fff;
    border-radius: 10px;
    margin-right: 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-content: center;
}

.styles li:hover {
    border: 1px solid #f4f4f4;
}

.styles li.active {
    border: 1px solid #1989fa;
}
</style>